<template>
  <div class="equipment-top">
    <div class="equipment-title">近期实验统计</div>
    <Tags :value="dayNumber" :list="dayList" @change="onChangeDay" />
    <div ref="barRef" id="bar"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { useRoute } from "vue-router";
// import { getExperimentData } from "@/api/large-screen";
import { getResize } from "@/utils/index.ts";
import * as echarts from "echarts";
import Tags from "./tags.vue";
import dayjs from "dayjs";

// ref
const barRef = ref(null);

const route = useRoute();
const equipmentId = ref(route?.query?.id);

const dayNumber = ref(7);
const dayList = [
  {
    name: "最近半个月",
    value: 15,
  },
  {
    name: "最近一周",
    value: 7,
  },
];
const onBar = async () => {
  const myChart =
    echarts.getInstanceByDom(barRef.value) || echarts.init(barRef.value);
  // const res = await getExperimentData({
  //   equipmentId: equipmentId.value,
  //   dayNumber: dayNumber.value,
  // });
  // const arr = res || [];
  const arr = new Array(dayNumber.value).fill().map((_, index) => {
    // 计算从今天往前推的天数（0 = 今天，1 = 昨天，...）
    const daysAgo = dayNumber.value - 1 - index;
    const date = dayjs().subtract(daysAgo, "day").format("MM-DD"); // "YYYY-MM-DD"
    return {
      id: index + 1,
      date,
      productNumber: Math.floor(Math.random() * 1000),
      growthRatio: Math.floor(Math.random() * 100),
    };
  });
  let xData = arr.map((item) => item.date);
  let data1 = arr.map((item) => item.productNumber);
  let data2 = arr.map((item) => item.growthRatio);
  /** 固定 */
  let nameList = ["产量", "同比上月"];
  let colors = ["rgba(0, 58, 255, 0.01)", "#159AFF"];
  let linecolor = "rgba(208, 222, 238,0.7)";

  const option = {
    grid: {
      top: "15%",
      left: "3%",
      right: "3%",
      bottom: "5%",
      containLabel: true,
    },
    legend: {
      itemWidth: 15, // 设置图例标记的大小
      itemHeight: 8, // 设置图例标记的大小
      data: nameList,
      textStyle: {
        color: "#f9f9f9",
        //   borderColor: '#fff',
      },
      top: 10,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      backgroundColor: "rgba(0,0,0,.5)",
      borderColor: "rgba(147, 235, 248, 0)",
      textStyle: {
        color: "#FFF",
      },
    },
    xAxis: {
      data: xData,
      axisLine: {
        show: true, //是否隐藏X轴轴线
        lineStyle: {
          color: "rgba(60,132,163,0.4)",
          width: 2,
        },
      },
      axisTick: {
        show: false, //是否隐藏X轴刻度
        alignWithLabel: true,
      },
      axisLabel: {
        show: true,
        color: "#FFF", //X轴文字颜色
        fontSize: 14,
        interval: 0,
      },
    },
    yAxis: [
      {
        type: "value",
        name: "单位：台",
        nameTextStyle: {
          color: "#fff",
          fontSize: 12,
          align: "center",
          padding: [0, 0, 5, 0],
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(255, 255, 255, 0.15)",
            // type: 'dashed' // dotted 虚线
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(255, 255, 255, 0.15)",
            // type: 'dashed' // dotted 虚线
          },
        },
        axisLabel: {
          show: true,
          color: "#FFF",
          fontSize: 14,
          // 去掉y轴千位逗号
          formatter: function (value) {
            return value + "";
          },
        },
      },
      {
        type: "value",
        axisLabel: {
          show: true,
          fontSize: 12,
          color: "#fff",
          // 去掉y轴千位逗号
          formatter: function (value) {
            return value + "%";
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(255, 255, 255, 0.15)",
            // type: 'dashed' // dotted 虚线
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: nameList[0],
        type: "bar",
        barWidth: 24,
        color: colors[1],
        // itemStyle: {
        // 	color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        // 		{
        // 			offset: 0,
        // 			color: colors[0]
        // 		},
        // 		{
        // 			offset: 1,
        // 			color: colors[1]
        // 		}
        // 	])
        // },
        data: data1,
      },
      {
        name: nameList[1],
        yAxisIndex: 1,
        type: "line",
        smooth: false,
        symbol: "circle",
        showSymbol: false,
        symbolSize: 4,
        lineStyle: {
          width: 2,
        },
        itemStyle: {
          color: linecolor,
          borderColor: linecolor,
          borderWidth: 2,
        },
        label: {
          show: false,
        },
        data: data2, //背景阴影长度
      },
    ],
  };
  getResize(option, myChart);
};

const onChangeDay = (val) => {
  dayNumber.value = val;
  onBar();
};

watch(route, (newVal) => {
  equipmentId.value = newVal?.query?.id;
  onBar();
});

onMounted(() => {
  onBar();
});
</script>

<style lang="scss" scoped>
#bar {
  width: 100%;
  height: calc(500px - 60px);
}
</style>
